<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018\7\26 0026
  Time: 16:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">

<!-- Mirrored from v3.bootcss.com/examples/dashboard/ by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 25 Nov 2015 09:27:48 GMT -->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://v3.bootcss.com/favicon.ico">

    <title>后台管理</title>

    <!-- Bootstrap core CSS -->
    <link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- layer弹窗css -->
    <link href="${pageContext.request.contextPath}/layer/skin/default/layer.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="${pageContext.request.contextPath}/bootstrap/css/dashboard.css" rel="stylesheet">

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="${pageContext.request.contextPath}/">投票系统后台管理页面</a>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="active"><a href="${pageContext.request.contextPath}/vote/toAddVote.do">增加投票<span class="sr-only">(current)</span></a></li>
                <li><a href="${pageContext.request.contextPath}/vote/toShowVote.do">投票管理</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h1 class="page-header">增加投票</h1>
            <!-- 新增投票表单 -->
            <form class="form-horizontal" id="addVoteForm">
                <div class="form-group">
                    <label for="channelSelect" class="col-sm-2 control-label">选择投票频道</label>
                    <div class="col-sm-10">
                        <select class="form-control" name="channel" id="channelSelect">
                            <option value="">---请选择投票频道---</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="voteName" class="col-sm-2 control-label">请输入投票名称</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="voteName" id="voteName" placeholder="投票名称">
                    </div>
                </div>
                <div id="voteOptionList">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">选项1名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="voteOption" placeholder="选项名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">选项2名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="voteOption" placeholder="选项名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">选项3名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="voteOption" placeholder="选项名称">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-1 col-sm-10">
                        <button type="button" class="btn btn-default" onclick="addVoteOption()">新增投票选项</button>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-default" onclick="addVoteBtn()">提交</button>
                        <button type="reset" class="btn btn-default">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="${pageContext.request.contextPath}/jquery/jquery-2.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
<!-- layer弹窗js -->
<script src="${pageContext.request.contextPath}/layer/layer.js"></script>
<script type="application/javascript">
    // 定义选项的个数
    var i = 3;

    // 定义新增投票选项函数
    function addVoteOption() {
        // 拼接选项
        var content = '';
        content += '<div class="form-group">';
        content += '	<label class="col-sm-2 control-label">选项' + (++i) + '名称</label>';
        content += '	<div class="col-sm-10">';
        content += '		<input type="text" class="form-control" name="voteOption" placeholder="选项名称">';
        content += '	</div>';
        content += '</div>';
        // 将拼接好的投票选项追加进去
        $("#voteOptionList").append(content);
    }

    $(function () {
        // 异步加载频道选项
        $.ajax({
            type: "POST",
            url: "${pageContext.request.contextPath}/channel/list.do",
            success: function (result) {
                // 判断是否成功
                if (result.success) {
                    var content = '';
                    // 成功,取出数据,添加到选项列表中
                    $.each(result.data, function (i, n) {
                        content += "<option value=" + n.channelID + ">" + n.channelName + "</option>"
                    });
                    $("#channelSelect").append(content);
                }
            },
            error: function () {
                alert("请求失败");
            }
        });
    });

    // 添加投票提交函数
    function addVoteBtn() {
        // 表单验证
        if ($("#channelSelect").val() == null || $("#channelSelect").val() == '') {
            layer.msg("请选择频道",{time:1000,icon:5,shift:6});
            return false;
        }
        if ($("#voteName").val() == null || $("#voteName").val() == '') {
            layer.msg("请输入投票名称",{time:1000,icon:5,shift:6});
            return false;
        }
        // 获得所有的投票选型
        var voteOptions = $("#voteOptionList input");
        var count = 0;
        $.each(voteOptions, function (i, n) {
            if ($(n).val() != null && $(n).val() != '') {
                count++;
            }
            //alert($(n).val());
        });
        if (count < 2) {
            layer.msg("请至少输入两个投票选项",{time:1000,icon:5,shift:6});
            return false;
        }
        // 弹出加载弹窗
        var loadingIndex = layer.msg('处理中', {icon: 16});
        // 定义异步请求的传递数据
        var jsonObj = {
            "channelID": $("#channelSelect").val(),
            "voteName": $("#voteName").val()
        };
        // 循环遍历
        $.each(voteOptions, function (i, n) {
            if ($(n).val() != null && $(n).val() != '') {
                jsonObj["voteOptionNames[" + i + "]"] = $(n).val();
            }
            //alert($(n).val());
        });

        // 开始异步请求,添加投票
        $.ajax({
            type: "POST",
            url: "${pageContext.request.contextPath}/vote/addVote.do",
            data: jsonObj,
            success: function (result) {
                // 关闭加载弹窗
                layer.close(loadingIndex);
                if (result.success) {
                    // 弹出成功弹窗
                    layer.msg(result.message,{time:1000,icon:6,shift:5});
                    // 重置表单
                    $("#addVoteForm")[0].reset();
                } else {
                    // 弹出失败弹窗
                    layer.msg(result.message,{time:1000,icon:5,shift:6});
                }
            },
            error: function () {
                // 弹出失败弹窗
                layer.msg('请求失败',{time:1000,icon:5,shift:6});
            }
        });
    }
</script>
</body>

<!-- Mirrored from v3.bootcss.com/examples/dashboard/ by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 25 Nov 2015 09:27:49 GMT -->
</html>